<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用标签学习</title>
</head>
<body>
    <!-- a标签锚功能 -->
    <div id="tips">我是一个锚点</div>

    <!-- hr标签：渲染一条红线-->
    <hr>

    <!-- h系列标签：标题标签 -->
    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>
    <hr>

    <h3>咏鹅</h3>
    鹅鹅鹅，
    曲项向天歌。
    白毛浮绿水，
    红掌拨青波。
    <hr>

    <!-- p标签：段落文本标签 -->
    <h3>咏鹅</h3>
    <p>鹅鹅鹅，</p>
    <p>曲项向天歌。</p>
    <p>白毛浮绿水，</p>
    <p>红掌拨青波。</p>
    <hr>

    <!-- br标签：换行标签-->
    <h3>咏鹅</h3>
    鹅鹅鹅，<br>
    曲项向天歌。<br>
    白毛浮绿水，<br>
    红掌拨青波。<br>
    <hr>

    <!-- b标签：变粗 -->
    <b>tom</b>
    <!-- strong标签：变粗，这个常用 -->
    <strong>tom</strong>
    <!--i标签：斜体-->
    <!--em标签：斜体-->
    <i>tom</i>
    <em>tom</em>
    <!--u标签：下划线-->
    <u>tom</u>
    <br>

    <!--strike标签：中横线标签-->
    <strike>100$</strike> 9.9$

    <!-- 特殊符号 -->
    <div>空&nbsp;&nbsp;&nbsp;格</div>
    <div>&lt;</div>
    <div>&gt;</div>
    <hr>

    <!--
    img标签，属性
    src: 要显示图片的路径
    alt: 图片没有加载成功时的提示
    title: 鼠标悬浮时的提示信息
    width: 图片的宽
    height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
    -->
    <img width=300px
         height="200"
         src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg"
         alt="风景图片"
         title="风景"
    >
    <hr>

    <!--
    a标签：超链接
    href属性指定目标网页地址。该地址可以有几种类型：
        绝对 URL - 指向另一个站点（比如 href="http://www.jd.com）
        相对 URL - 指当前站点中确切的路径（href="index.htm"）
        锚 URL - 指向页面中的锚（href="#top"）
    -->
    <a href="http://www.baidu.com">click</a>
    <a href="http://www.baidu.com" target="_blank">打开新窗口</a>

    <!-- 锚 -->
    <a href="#tips">锚</a>
    <hr>

    <!--
        列表标签
        <ul>: 无序列表  （最常用）
            [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
            <li>:列表中的每一项

        <ol>: 有序列表
             <li>:列表中的每一项

        <dl>  定义列表
             <dt> 列表标题
             <dd> 列表项
    -->
    <ul type="disc">
        <li>alex</li>
        <li>egon</li>
        <li>wu</li>
    </ul>

    <ol start="50">
        <li>alex</li>
        <li>egon</li>
        <li>wu</li>
    </ol>

    <dl>
        <dt>广东省</dt>
        <dd>广州</dd>
        <dd>深圳</dd>
        <dd>惠州</dd>
    </dl>
    <hr>

</body>
</html>
